<template>
	<view class="box">
		<view class="header">
			<view class="now" :class="{active:type==1}" @click="handlerChangeTab(1)">
				正在热映
			</view>
			<view class="coming" :class="{active:type==2}" @click="handlerChangeTab(2)">
				即将上映
			</view>
		</view>
		<!-- 电影列表 -->
        <view style="margin-top: 120rpx;">
        	<MovieItem v-for="film in films" :key="film.filmId" :film="film">
        		<template #btn="{isPresale}">
        	
        			 <button v-if="type==1" size="mini" style="width: 100%;">购票</button>
        		     <button size="mini" v-if="type==2 && isPresale">预约 </button>
        		</template>
        	</MovieItem>
        </view>
		


	</view>
</template>

<script>
	import {
		http
	} from "../../untils/tools.js"
	import MovieItem from "../../components/MovieItem.vue";
	export default {
		data() {
			return {

				pageNum: 1,
				pageSize: 10,
				type: 1, // 1 正在热映  2 即将上映
				total: 0,
				films: []
			};
		},
		components: {
			MovieItem
		},
		watch: {
			type: {
				handler(value) {
					this.films = []
					this.pageNum = 1
					this.loadData()
				}
			}
		},
		computed: {
			totalPage() {
				if (this.total == 0) {
					return 1;
				}
				return Math.ceil(this.total / this.pageSize)
			}
		},
		methods: {
			handlerChangeTab(active) {
				this.type = active
				// this.loadData()
			},
			async loadData() {
				try {
					uni.showLoading({
						title: `正在加载第${this.pageNum}页!`,
						mask: true
					})
					const res = await http({
						url: "https://m.maizuo.com/gateway",
						data: {
							cityId: 440300,
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							type: this.type,
							k: 1132592
						},
						header: {
							'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17363031641221574598328321"}',
							'X-Host': 'mall.film-ticket.film.list'
						}
					})

					console.log(res);
					// debugger
					if (res.status == 0) {
						// console.log(res);
						this.films = [...this.films, ...res.data.films]
						console.log(this.films);
						this.total = res.data.total
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'fail'
						});
					}


				} catch (err) {

				} finally {
					uni.stopPullDownRefresh()
					uni.hideLoading()
				}

			}

		},
		onReady() {
			this.loadData()
		},
		// 上拉加载
		onReachBottom() {
			if(this.pageNum >= this.totalPage) {
				uni.showToast({
					title: "已经到底了！",
					duration: 2000,
					icon: 'fail'
				});
				return;
			}
			 // console.log("上拉加载....");
			 this.pageNum++;
			 this.loadData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.films = []
			this.pageNum = 1
			this.loadData()
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.header {
			height: 120rpx;
			display: flex;
			font-size: 40rpx;
			line-height: 120rpx;
			text-align: center;
			position: fixed;
			top:0;
			left:0;
			right:0;

			.now {
				height: 120rpx;
				flex: 1;
			}

			.coming {
				height: 120rpx;
				flex: 1;
			}

			.active {
				color: red;
			}
		}
	}
</style>